<template>
  <div>
    <header-title :title="title"></header-title>
    <div class="flex_center">
      <div class="bodyContent">
        <loading v-if="showLoading"></loading>
        <div v-if="!showLoading">
          <div class="orderDetail_address margin_bottom">
            <div class="address_top">
              <div class="orderStatus flex flex_between sure_over" v-if="orderStatus == 0">
                <p class="flex_center">
                  <img src="./img/ok3.png">
                  <span>已完成</span>
                </p>
                <span> 欢迎再次光临</span>
              </div>
              <p class="orderStatus flex_center" v-if="orderStatus == 1">
                <img src="./img/time.png">
                <span>等待付款</span>
              </p>
              <p class="orderStatus flex_center" v-if="orderStatus == 2">
                <img src="./img/time1.png">
                <span>等待收货</span>
              </p>
              <p class="orderStatus flex_center" v-if="orderStatus == 3">
                <img src="./img/time.png">
                <span>已取消</span>
              </p>
              <div class="order_about flex_center">
                <div class="order_content">
                  <div v-if="addressStatus == 1" class="order_address flex">
                    <img src="../../assets/img/address_blue.png">
                    <div class="">
                      <p style="margin-bottom: 0.4rem"><span style="font-size: 1rem;font-weight: bold">{{order.buyer_name}}</span> <span>{{order.mobile | hiddenMobile}}</span></p>
                      <p style="font-size: 0.8rem;color: #999">地址：{{order.buyer_address}}</p>
                    </div>
                  </div>
                  <div v-if="addressStatus == 0" class="welcome flex_center">
                    <img src="./img/ok1.png">
                    <p>
                      感谢您在我店购物，欢迎您再次光临
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="orderDetail_goods margin_top write_background">
              <p class="goods_mall flex flex_between" @click="toShopDetail">
                <span><i style="color: #90c7e4;margin-right: 0.5rem" class="fa fa-hand-o-right"></i>{{shop_name}}</span>
                <i class="fa fa-angle-right"></i>
              </p>
              <div class="goods_list" v-for="goods in order.order_goods">
                <div class="goods_about flex flex_between">
                  <div class="flex goods_describe">
                    <div class="goods_img">
                      <img :src="goods.goods_img">
                    </div>
                    <div class="goods_name">
                      <p>{{goods.goods_name}}</p>
                    </div>
                  </div>
                  <div>
                    <p>{{goods.goods_price}}元</p>
                    <p>x{{goods.goods_num}}</p>
                  </div>
                </div>
              </div>

            <a :href="'tel:'+order.mobile"><p class="goods_tel flex_center"><img src="./img/phone.png"><span style="color: #2c3e50">拨打电话</span></p></a>
          </div>
          <div class="orderDetail_order margin_top write_background">
            <div class="orderNum_about">
              <p class="order_num" style="padding-top: 0.5rem;">
                订单编号：<input id="copy_aim" readonly v-model="order.order_sn">
                <span class="copy" @click="copyOrderNum()">复制</span>
              </p>
              <p>下单时间：{{order.addtime | formatDate}}</p>
              <div >
                <p>支付方式：{{order.type_text}}
                  <span v-if="order.type == 1 && orderStatus != 1">(未付款)</span></p>
                <p v-if="paytime == 1">支付时间：{{order.payment_time | formatDate}}</p>
              </div>
              <p></p>
            </div>
            <div class="all_money flex flex_end flex_vertical_center">实际付款：<p>￥<span class="font-weight" style="font-size: 1.4rem">{{order.order_amount}}</span></p></div>
          </div>
          <div class="otherGoods margin_top">

          </div>
        </div>
      </div>
    </div>
    <div class="orderDetailFoot flex flex_vertical_center">
      <mu-container class="button-wrapper flex flex_end ">
        <mu-button v-if="orderStatus ==1 || (orderStatus ==2 && deleteOrderStatus == 1)" flat @click="cancleOrder()">取消订单</mu-button>
        <mu-button v-if="orderStatus ==1 && order.type == 0" flat color="primary" @click="payOrder(order)">付款</mu-button>
        <a :href="'tel:'+contact" style="color: #333;"><mu-button v-if="orderStatus == 2" flat color="primary">催单</mu-button></a>
        <mu-button v-if="orderStatus == 0" flat disabled>已完成</mu-button>
      </mu-container>
    </div>
  </div>
</template>

<script>

  import {formatDate} from '../../assets/js/date';
  import headerTitle from '../headerTilte'
  import Loading from "../../components/loading";

    export default {
        name: "order-detail",
      data(){
          return{
            showLoading:true,
            title:'订单详情',
            addressStatus:1,//0表示不显示地址（订单已完成）  1 表示显示地址
            orderStatus:2,//0-已完成 1- 等待付款 2-等待收货（待发货，已发货） 3-已取消
            order:'',
            num:0,
            paytime:1,
            bottomStatus:0,
            contact:'',
            deleteOrderStatus:0,
            shop_name:''
          }
      },
      mounted(){
          this.checkLogin();
          this.initH();
          this.initDetail();
          this.num = this.$route.query.num;
          this.contact = this.$route.query.contact
          var login = this.getCache('login_key');
          this.shop_name = login.shop_name;

      },
      methods:{
        copyOrderNum(){
          var ele = document.getElementById('copy_aim');
          ele.select();
          document.execCommand('Copy');
          /*alert('复制成功');*/
        },
        initH(){
          var headerH = $('.header').outerHeight(true);
          var allH = document.documentElement.clientHeight;
          var footH = $('.orderDetailFoot').height();
          var h = allH - headerH - footH;
          $('.bodyContent').css('height',h+'px');
        },
        initDetail(){
          var id = this.$route.query.id;
          if(id == undefined || id == null){
            return;
          }
          this.yesS.getOrderDetail(
            this.$combineParams({id:id})
          ).then(res => {
            this.order=res.data;
            //判断订单状态
            //订单未付款
            if(this.order.status == 10 &&  this.order.dispatch <= 0 && this.order.type == 0 || this.num == 1){
              this.orderStatus = 1;
              this.paytime = 0;//表示不显示付款时间

            }
            //等待收货 (线上支付：已付款  线下支付：未付款)
            if(((this.order.status == 20 && this.order.type == 0 ) ||
                (this.order.status == 10 && this.order.type == 1))
              && this.order.dispatch <= 1){
              this.orderStatus = 2
              if(this.order.status == 10 && this.order.type == 1 && this.order.dispatch <= 0){

                this.deleteOrderStatus = 1;
              }
            }
            //已完成
            if(this.order.dispatch == 2){
              this.orderStatus = 0
            }
            //是否显示付款时间
            if(this.order.payment_time == 0){
              this.paytime = 0;//表示不显示付款时间
            }
            this.showLoading = false
          })

        },


        //取消订单
        cancleOrder() {
          if(this.isEmpty(this.order)){
            return;
          }
          if(this.isEmpty(this.contact)){
            this.$toast.error("您暂时不能取消该订单");
            return;
          }
          this.$confirm('取消订单需联系商家，联系方式：'+this.contact, '提示', {
            type: 'warning'
          }).then(({ result }) => {
            if (result) {
              window.location.href = "tel:" + this.contact;
            }
          });
        },

        cancelOk(){
          this.$alert('取消订单成功', '提示', {
            okLabel: '知道了'
          }).then(() => {
            this.$router.push({path:'/qds/orderList'})
          });
        },
        //付款
        payOrder(obj){
          if(this.isEmpty(this.order)){
            return;
          }
          this.$confirm('确认支付？', '提示', {
            type: 'warning'
          }).then(({ result }) => {
            if (result) {
              //调起微信支付页面
              this.sureOderPay(obj);
            } else {

            }
          });
        },
        sureOderPay(obj){
          this.yesS.orderPay(
            this.$combineParams({order_id: obj.id})
          ).then(res => {
            var status = res.status;
            if(status == 1){
              this.payment(res.data);
            }
          })
        },
        payment(data) {
          this.wxPay(data, 1);
        },
        toShopDetail(){
          this.$router.push({path:'/qds/aboutUs'})
        }
      },
      filters:{
        formatDate(time) {
          var date = new Date(time*1000);
          return formatDate(date, 'yyyy-MM-dd hh:mm');
        },
        hiddenMobile(mobile){
          console.log(mobile)
          if(typeof mobile != "undefined"){
            mobile = mobile.substr(0, 3) + '****' + mobile.substr(7);
            return mobile
          }
        }
      },
      components:{
        Loading,
        headerTitle
      }
    }
</script>

<style scoped>
  @import "css/orderDetail.css";
</style>
